<template>
    <div class="box">
        <headline :title="'视频监控'" :is-show-more="true"></headline>
        <el-row :gutter="20" class="cameraBox">
            <el-col :span="12">
                <div class="camera">
                    <video muted poster="http://static.jvlihd.cn/ueSchool/video/video1_poster.jpg" src="http://static.jvlihd.cn/ueSchool/video/video1.mp4" autoplay loop></video>
                </div>
                <p>一号视频监控点</p>
            </el-col>
            <el-col :span="12">
                <div class="camera">
                    <video muted poster="http://static.jvlihd.cn/ueSchool/video/video2_poster.jpg"  src="http://static.jvlihd.cn/ueSchool/video/video2.mp4" autoplay loop></video>
                </div>
                <p>二号视频监控点</p>
            </el-col>
            <el-col :span="12">
                <div class="camera">
                    <video muted poster="http://static.jvlihd.cn/ueSchool/video/video3_poster.jpg"   src="http://static.jvlihd.cn/ueSchool/video/video3.mp4" autoplay loop></video>
                </div>
                <p>三号视频监控点</p>
            </el-col>
            <el-col :span="12">
                <div class="camera">
                    <video muted poster="http://static.jvlihd.cn/ueSchool/video/video4_poster.jpg"  src="http://static.jvlihd.cn/ueSchool/video/video4.mp4" autoplay loop></video>
                </div>
                <p>四号视频监控点</p>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>

import headline from './headline.vue';


defineProps({
    title:String
})

</script>

<style lang="less" scoped>
    .box{
        // width: 340px;
        line-height: 40px;
        .cameraBox
        {
            margin-top: 10px;
            >div{
                position: relative;
                overflow: hidden;
                margin-top: 5px;
            }
            .camera{
                width: 100%;
                height: 100px;
                video{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                color: white;
                background-color: rgba(0, 0, 0, 0.7);
                text-align: center;
                position: absolute;
                width: 90%;
                bottom: 0;
                height: 30px;
                line-height: 30px;
                overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
                text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
                white-space: nowrap; 
                font-size: 12px;
            }
        }
       
    }


</style>